<template>
    <!-- 添加或修改采购单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="物品名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入物品名称" />
            </el-form-item>
            <el-form-item label="数量" prop="quantity">
                <el-input v-model="form.quantity" placeholder="请输入数量" />
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入单位" />
            </el-form-item>
            <el-form-item label="生产日期" prop="produceTime">
                <el-date-picker v-model="form.produceTime" type="date" value-format="yyyy-MM-dd" placeholder="选择生产日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="过期日期" prop="expireTime">
                <el-date-picker v-model="form.expireTime" type="date" value-format="yyyy-MM-dd" placeholder="选择过期日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="食品类型" prop="fType">
                <el-select v-model="form.fType" placeholder="请选择食品类型" @change="handleTypeChange">
                    <el-option v-for="item in options" :key="item.val" :label="item.name" :value="item.val">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="子类型" prop="fTypeSub">
                <el-select v-model="form.fTypeSub" placeholder="请选择子类型" @change="handleTypeSubChange">
                    <el-option v-for="item in typeChildList" :key="item.id" :label="item.typeName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否进口" prop="whetherImport">
                <el-radio v-model="form.whetherImport" label="1">是</el-radio>
                <el-radio v-model="form.whetherImport" label="0">否</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { foodTypeList } from "@/api/material/foodType";

export default {
    name: "Order",
    data() {
        return {
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {

            },
            options: [
                {
                    name: '食品',
                    val: 'Food'
                },
                {
                    name: '食用农产品',
                    val: 'FoodFarm'
                },
                {
                    name: '食品添加剂',
                    val: 'FoodAdd'
                },
                {
                    name: '食品相关',
                    val: 'FoodRelate'
                }

            ],
            typeChildList: [],
            // 表单校验
            rules: {
                name: [{ required: true, message: '请输入', trigger: 'blur' }],
                quantity: [{ required: true, message: '请输入', trigger: 'blur' }],
                unit: [{ required: true, message: '请输入', trigger: 'blur' }],
                produceTime: [{ required: true, message: '请选择', trigger: 'blur' }],
                expireTime: [{ required: true, message: '请选择', trigger: 'blur' }],
                fType: [{ required: true, message: '请选择', trigger: 'blur' }],
                fTypeSub: [{ required: true, message: '请选择', trigger: 'blur' }]
            },
        };
    },
    created() {

    },
    methods: {
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                name: null,
                quantity: null,
                unit: null,
                produceTime: null,
                expireTime: null,
                fType: null,
                fTypeSub: null,
                whetherImport: '0'
            };
            this.resetForm("form");
        },
        handleTypeChange(e) {
            this.form.fTypeName = this.options.filter(item => {
                return item.val == e
            })[0].name
            foodTypeList({
                pageNum: 1,
                pageSize: 9999,
                parentType: e
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.typeChildList = res.rows;
                }
            })
        },
        handleTypeSubChange(e) {
            this.form.fTypeSubName = this.typeChildList.filter(item => {
                return item.id == e
            })[0].typeName
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加商品";
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let params = Object.assign({}, this.form)
                    this.$emit('change', params)
                    this.reset();
                    this.open = false;
                }
            });
        }
    }
};
</script>